<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/31
  Time: 11:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>所有文件</title>
    <!--jquery核心包-->
    <script type="text/javascript" src="${ctx}/js/jquery.min.js" ></script>
    <!--easyui-->
    <script type="text/javascript" src="${ctx}/js/jquery.easyui.min.js" ></script>
    <script type="text/javascript" src="${ctx}/js/extJquery.js" ></script>
    <script type="text/javascript" src="${ctx}/js/extEasyUI.js" ></script>
    <script type="text/javascript" src="${ctx}/js/easyui-lang-zh_CN.js" ></script>
    <!--自定义闭包-->
    <script type="text/javascript" src="${ctx}/js/allFile.js"></script>
    <!--文件上传提交包-->
    <script type="text/javascript" src="${ctx}/js/jquery-form.js"></script>
    <!--easyui样式引入-->
    <link rel="stylesheet" href="${ctx}/css/themes/default/easyui.css" />
    <link rel="stylesheet" href="${ctx}/css/themes/icon.css" />
    <link rel="stylesheet" href="${ctx}/css/style.css" />
</head>
<body>
<div id="cc" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',title:'',split:false" style="height:80px;">
        <div style="margin: 20px;">
            <a onclick="newDir()" class="easyui-linkbutton" iconCls="icon-eadd" style="width: 120px;height: 40px;">
                <font style="font-size: 16px;">新建文件夹</font>
            </a>
            <a class="easyui-menubutton"
               iconCls="icon-redo"
               data-options="menu:'#mm',plain:false"
               style="width: 120px;height: 40px;">
                <font style="font-size: 16px;">上传</font>
            </a>
            <a id="preDir" onclick="preDir()" class="easyui-linkbutton" iconCls="icon-undo"
               style="width: 120px;height: 40px;">
                <font style="font-size: 16px;">上层文件夹</font>
            </a>
            <div id="mm" style="width: 120px;">
                <div data-options="iconCls:'icon-file'" onclick="uploadFile()">
                    <font style="font-size: 14px;">上传文件</font>
                </div>
                <div data-options="iconCls:'icon-dir'" onclick="uploadDir()">
                    <font style="font-size: 14px;">上传文件夹</font>
                </div>
            </div>
        </div>
    </div>
    <div data-options="region:'center'" style="padding-left:20px;background:#fff;">
        <div id="cc1" class="easyui-layout" data-options="fit:true,border:false">

            <div data-options="region:'center',border:false" style="padding-left:20px;background:#fff;">
                <table id="allTable"></table>
            </div>
        </div>

    </div>
    <input type="hidden" id="ctx" value="${ctx}">
    <script>
        var at,parentId = 0,flat = false,id=0,ctx = $('#ctx').val();

        $(function(){
            $('#preDir').linkbutton('disable');
            at = $('#allTable').datagrid({
                border:false,
                url:'${ctx}/fc/find',
                queryParams:{
                  parentId:id
                },
                fit:true,
                singleSelect:true,
                frozenColumns:[[
                    {field:'ck',checkbox:true},
                    {field:'oldFileName',title:'文件/文件夹名称(双击打开文件夹)',width:300,align:'left',
                        formatter:function(v, r, i){
                            var imgName = "v1";
                            if(r.fileType!="dir"){
                                imgName = r.fileSuffix;
                            }
                            var img = "<img style='width: 16px;height: 16px;margin-top: 3px' src='/img/icons/"+imgName+".ico'>&nbsp;";
                            return img + v;
                        }
                    },
                    {field:'active',title:'操作',width:200,align:'center',
                        formatter:function(v,r,i){
                            var str = '';
                            str += '<a href="#" style="color:green" onclick="downloadData('+r.id+')">下载</a>';
                            str += '&nbsp;|&nbsp;';
                            str += '<a href="#" style="color:red" onclick="deleteData('+r.id+')">删除</a>';
                            str += '&nbsp;|&nbsp;';
                            str += '<a href="#" style="color:blue" onclick="moveDataTo('+r.id+')">移动到..</a>';
                            str += '&nbsp;|&nbsp;';
                            str += '<a href="#" style="color:blueviolet" onclick="renameTo('+r.id+',\''+r.oldFileName+'\',\''+r.fileSuffix+'\')">重命名</a>';
                            return str;
                        }
                    },
                    {field:'fileSize',title:'文件大小',width:100,align:'center'},
                    {field:'createTime',title:'创建时间',width:150}
                ]],
                columns:[[
                    {field:'typeName',title:'类型名称',width:80},
                    {field:'status',title:'文件状态',width:80,
                        formatter:function(v,r,i){
                            if(v=="s"){
                                v = "<font style='color:green'>显示</font>";
                            }else{
                                v = "<font style='color:gray'>隐藏</font>";
                            }
                            return v;
                        }
                    },
                    {field:'userName',title:'上传人名称',width:100}
                ]],
                onDblClickRow:function(i,row){
                    //console.log(row);//f12查看
                    id = row.id;
                    parentId = row.parentId;
                    flat = true;
                    //上一层按钮可用
                    $('#preDir').linkbutton('enable');
                    var type = row.fileType;
                    fleshData(id);

                }
            });

            //监听文件上传选择改变事件
            $('#fileResource').on('change',function(){
                var url = '${ctx}/fc/uploadFile/'+id;
                uploadData(url);
            });

            //监听文件夹上传选择改变事件
            $('#dirResource').on('change',function(){
                var url = '${ctx}/fc/uploadDir/'+id;
                uploadData(url);
            })
        });

        function uploadData(url){
            progressLoad();
            //获取表单
            var f = $('#uploadForm');
            var option = {
                type:'post',
                url:url,
                headers:{"ClientCallMode":"ajax"},
                dataType:'json',
                success:function(result){
                    progressClose();
                    alert(result.msg);
                    if(result.is){
                        at.datagrid({
                            queryParams: {
                                parentId:id
                            }
                        });
                        at.datagrid('reload');
                    }
                }
            };

            f.ajaxSubmit(option);
        }
        //文件下载
        function downloadData(id){
           var href = '${ctx}/fc/downloadData/'+id;
           window.open(href);
           $.ajax({
               type:'get',
               url:'${ctx}/hc/addDown/'+id,
               dataType:'json',
               success:function(result){

               }
           });
        }

        //文件重命名
        function renameTo(mid,oldFileName,suffix) {
            $.messager.prompt("系统提示","请输入新的名称:",function(r){
                if(suffix!=""&&r!=''){
                   r = r + "." +suffix;
                }
                //实现重命名
                if(r==oldFileName||r==''){
                    return;
                }else{
                    $.ajax({
                       type:'post',
                       url:'${ctx}/fc/edit',
                       data:{
                           id:mid,
                           oldFileName:r
                       },
                       dataType:'json',
                       success:function(result){
                           alert(result.msg);
                           if(result.is){
                               at.datagrid({
                                   queryParams: {
                                       parentId:id
                                   }
                               });
                               at.datagrid('reload');
                           }
                       }
                    });
                }

            });

        }


        //文件移动
        function moveDataTo(mid){
            $('body').append('<div id="d1"></div>');
            $('#d1').dialog({
                title:'文件移动',
                width:300,
                height:400,
                href:'${ctx}/fc/fileTree?mid='+mid,
                modal:true,
                buttons:[
                    {
                        text:'确定',
                        iconCls:'icon-save',
                        handler:function(){
                            //获取移动到哪里的文件夹id
                            var node = $('#fileTree').tree('getSelected');
                            if(node==null){
                                alert("请选择移动到的文件夹!");
                                return;
                            }
                            var parentId = node.id;
                            //alert("要移动的文件id:"+id+",移动到的id:"+parentId);
                            $.ajax({
                                type:'post',
                                url:'${ctx}/fc/edit',
                                data:{
                                    id:mid,
                                    parentId:parentId
                                },
                                dataType:'json',
                                success:function(result){
                                    alert("移动"+result.msg);
                                    if(result.is){
                                        id = parentId;
                                        at.datagrid({
                                            queryParams: {
                                                parentId:id
                                            }
                                        });
                                        at.datagrid('reload');
                                        $('#d1').dialog('destroy');
                                    }
                                }
                            });
                        }
                    },{
                        text:'取消',
                        iconCls:'icon-cancel',
                        handler:function(){
                            $('#d1').dialog('destroy');
                        }
                    }
                ]
            });
        }

    </script>
    <form id="uploadForm" enctype="multipart/form-data">
        <input multiple type="file" name="fileResource" id="fileResource" style="display: none;"/>
        <input type="file" name="dirResource" id="dirResource" style="display: none;" webkitdirectory mozdirectory/>
        <a href="" id="download" style="display:block;">下载</a>
    </form>
</div>
</body>
</html>

